저는 각도를 처음 접했고 도움이 필요한 다음과 같은 문제가 있습니다.
차트 보드를 만들기 위해 각도 차트 지시문 http://jtblin.github.io/angular-chart.js/를 사용하고 있습니다. 다음 시나리오가 있습니다.
여기에 컨트롤러와 관련된 뷰 및 코드 입력 지시문이 있습니다.
컨트롤러 내부에는 객체를 보유하는 배열 차트 []가 있어야합니다.
이러한 개체는 차트 지시문으로 양방향 바인딩되어야합니다.
그렇게하는 적절한 방법은 무엇입니까? 각 차트에 컨트롤러를 연결하지 않고 동적으로 차트를 작성합니다. 가능합니까?
reportView.html
<차트>
reportViewController.js
angular.module ( 'app'). controller ( 'reportViewController', reportViewCtrl);
reportViewCtrl. $ inject = [ '$ scope', '$ log', 'RefinerService', 'appConfig'];
function reportViewCtrl ($ scope, $ log, RefinerService, appConfig) {
$ scope.charts = [];
var chart = {
ID : 1
, 표시 : true
, 유형 : "chart-line"
, 데이터 : [
[65, 59, 80, 81, 56, 55, 40]
, [28, 48, 40, 19, 86, 27, 90]
]
, 라벨 : [ '2006', '2007', '2008', '2009', '2010', '2011', '2012']
, 시리즈 : [ '제품 A', '제품 B']
}
$ scope.charts.push (chart);
}
chartTemplate.html
편집 : OP와 협력하여 작업 예제를 보여주는 최종 바이올린-https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview
ng-repeat의 "c"를 차트 지시문에 전달해야합니다.
다음은 시연 할 바이올린입니다. http://jsfiddle.net/8zwmt18L/1/
당신의 지시에서 :
angular.module ( 'app'). directive ( 'chart', function () {
return {
제한 : 'E',
templateUrl : 'templates / chartTemplate.html',
범위 : {
chartData : '='
}
};
});
디렉티브 템플릿에서 :
default